<!-- 用户里的动态页面 -->
<template>
  <div id="userRespone">
    <div class="left-box">
      <!-- 左边头部 -->
      <div class="left_head_box">
        <router-link to="/user/dynamic" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==1 ? selectStyle : none">收藏</span></div></router-link>
        <router-link to="/user/article" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==2 ? selectStyle : none">文章</span></div></router-link>
        <router-link to="/user/follow" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==3 ? selectStyle : none">回答</span></div></router-link>
        <div class="head_btn_box_link">
          <div class="title">更多</div>
          <div class="select-box">
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的话题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/problem" class="select-font">关注的问题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的收藏夹</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的专栏</router-link>
            </div>
          </div>
        </div>
        <!--<router-link to="/user/hotList" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==5 ? selectStyle : none">文章</span></div></router-link>-->
      </div>
      <!-- 左边内容切换 -->
      <div class="left-head-name"><strong>我的回答</strong></div>
      <div class="left_body_box">
        <UserRespone v-for="(i, index) of AnswerList" :key="index" :cardList="i"></UserRespone>
      </div>
    </div>
  </div>
</template>

<script>
  import UserRespone from './userCard/UserRespone'
  export default {
    name: 'userDynamic',
    components: {
      'UserRespone': UserRespone
    },
    data () {
      return {
        selectLeftHeadBtn: 3,
        selectStyle: {'color': '#0084ff'},
        list: [
          { 'id': 1, 'title': '下赛季湖人能赢得总冠军吗', 'content': '我觉得不可能的', 'isImage': true, 'imageUrl': '', 'goodNum': 99, 'isGood': false, 'badNum': 999, 'commentNum': 1567 },
          { 'id': 2, 'title': '公鸡下蛋', 'content': '内容', 'isImage': false, 'imageUrl': '', 'goodNum': 5032, 'isGood': true, 'badNum': 101, 'isBad': false, 'commentNum': 800 }
        ],
        AnswerList: []
      }
    },
    computed: {
    },
    methods: {
    },
    created () {
      this.axios.get('/api/getAnswerByUserId', {
        params: {
          phone: sessionStorage.getItem('phone')
        }
      })
        .then(res => {
          this.AnswerList = res.data.data
          console.log(res)
        })
    }
  }
</script>

<style scoped>
  /*@import 'xxx.css';*/
  #userRespone{
    width: 100px;
    background-color: #76839b;
    height: 100px;
  }

  .left-box{
    width: 695px;
    height: 100%;
    background-color: white;
    float: left;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
  }

  .left_head_box{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #f0f2f7;
    position:relative
  }

  .head_btn_box_link{
    width: auto;
    height: 100%;
    float: left;
    margin-right: 20px;
    margin-left: 22px;
  }

  .head_btn_box{
    color: #1a1a1a;
    font-size: 16px;
    text-align: center;
    line-height: 60px;
  }

  .head_btn_box_link:hover .head_btn_box_p{
    color: #175199;
  }
  .left-head-name{
    text-align: left;
    padding-left: 20px;
    padding-top: 5px;
    font-size: 18px;
  }
  .left_body_box{
    height: auto;
    width: 100%;
    display: inline-block;
    animation: zoomIn 0.5s ease-in;
  }
  .title{
    text-align: left;
    font-size: 16px;
    padding-top: 18px;
    text-align: left;
    cursor: pointer;
  }
  .select-box{
    margin-left: 10px;
    margin-top: 10px;
    width: 130px;
    padding-left: 20px;
    visibility: hidden;
    text-align: left;
    box-shadow: #666 0px 0px 4px;
    border-radius: 2px;
    background-color: #ffffff;

  }
  .title-select-box{
    font-size: 12px;
    z-index: 99;
    background-color: #fff;
    border-radius: 5px;
    height: 30px;
    padding-top: 2px;
  }
  .head_btn_box_link:hover .select-box {
    visibility: visible;
  }
  .select-font{
    color: #878787;
    font-size: 12px;
  }
</style>
